import React, {Component} from "react";
import {Form, Input, Button, Checkbox, Alert, Row, Col, Modal} from 'antd'
import axios from 'axios'
// import {server_addr} from "../../index";


const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 7,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
const psdLayout = {
    wrapperCol: {
        span: 5,
    },
};






class Register extends Component{
    formRef = React.createRef();

    constructor(props){
        super(props);
        this.state = {
            mail_code: '',
            visible: false,
            content: '',
            email: '',
            username: '',
            password: '',
            count: 60,
            linked: true,
        }

    }






    changePassword(e){
        this.setState({
            password: e.target.value
        })
    }
    changeEmail(e){
        this.setState({
            email: e.target.value
        })
    }
    changeUsername(e){
        this.setState({
            username: e.target.value
        })
    }
    changeCode(e){
        this.setState({
            mail_code: e.target.value
        })
    }

    // onSubmit = () => {
    //
    //     console.log(this.state.email+this.state.password)
    //     let e = this
    //     axios({
    //         method: 'post',
    //         url: server_addr+"/register/submit",
    //         data: {
    //             re_type: 'user',
    //             email: this.state.email,
    //             username: this.state.username,
    //             psd: this.state.password,
    //             code: this.state.mail_code,
    //         },
    //
    //     }).then(function(res){
    //         console.log(res['data']+e.state.email);
    //         if(res['data'] === 'exist'){
    //             e.setState({
    //                 visible:true,
    //                 content: "用户  "+e.state.email+"  已被注册"
    //             })
    //         }
    //         else if(res['data'] === 'codeErr'){
    //             e.setState({
    //                 visible:true,
    //                 content: "验证码错误",
    //             })
    //         }
    //         else{
    //             e.setState({
    //                 visible:true,
    //                 content: "注册成功",
    //             })
    //             window.location.href = ('/#/Likes?'+e.state.email)
    //         }
    //
    //     })
    // };


    countDown() {
        const {count} = this.state;


        if (count === 1) {
            this.setState({
                count: 60,
                linked: true,
            });
        } else {
            this.setState({
                count: count - 1,
                linked: false,
            });

            setTimeout(this.countDown.bind(this), 1000);
        }
    }

    // sendCode = () => {
    //     let e = this
    //
    //     axios({
    //         method: 'post',
    //         url: server_addr+"/send_code",
    //         data: {
    //             email: this.state.email,
    //
    //         },
    //
    //     }).then(function(res){
    //         console.log(res['data']+e.state.email);
    //         if(res['data'] === 'success'){
    //             e.setState({
    //                 visible:true,
    //                 content: "验证码发送成功"
    //             })
    //         }
    //
    //         else{
    //             e.setState({
    //                 visible:true,
    //                 content: "验证码发送失败",
    //             })
    //         }
    //
    //     })
    //     e.countDown();
    // };
    handleOK = e =>{
        this.setState({
            visible: false
        })
    }
    render(){
        let reform={
            width: '60%',
            margin: '0 auto',
        }
        let check={
            float: "left",
        }

        const onFinish = values => {
            console.log('Success:', values);
        };


        const onFinishFailed = errorInfo => {
            console.log('Failed:', errorInfo);
        };

        return (
            <div style={reform}>
                <p style={{marginTop:"5vh", fontSize:"2vw", textAlign:"center", fontWeight:"bolder"}}>注册</p>
                <Alert message="该功能正在完善，敬请期待！" type="info" showIcon style={{width:"20vw",margin:"0 0 5vh 19.5vw"}}/>
                <div style={{marginLeft:"10%"}}>
                    <Modal
                        title="注册反馈"
                        visible={this.state.visible}
                        onOk={this.handleOK}

                    >

                        <p style={{color: 'blue'}}>{this.state.content}</p>
                    </Modal>
                    <Form {...layout}

                          name="storeRegister"
                          onFinish={this.onSubmit}
                          ref={this.formRef}

                    >
                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={ [
                                {
                                    type: 'email',
                                    message: '请输入正确的邮箱地址'
                                },
                                {
                                    required: true,
                                    message: '请输入邮箱地址'
                                },

                            ]}
                        >



                            <Input size='default' onChange={this.changeEmail.bind(this)}  placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item
                            label="用户名"
                            name='username'
                            rules={ [

                                {
                                    required: true,
                                    message: '请输入用户名'
                                },
                                {
                                    max: 12,
                                    message: "用户名长度不能超过12"
                                },

                                {
                                    min: 6,
                                    message: "用户名长度不能低于6"
                                }

                            ]}

                        >
                            <Input size='default' onChange={this.changeUsername.bind(this)}  placeholder="请输入用户名" />
                        </Form.Item>
                        <Form.Item
                            label="登陆密码"
                            name="password"
                            rules={ [

                                {
                                    required: true,
                                    message: '请输入密码'
                                },
                                {
                                    min: 8,
                                    message: '密码不能小于8个字符'
                                },
                                {
                                    max: 16,
                                    message: '密码不能大于16个字符'
                                },
                                {
                                    pattern: new RegExp(/^[0-9a-zA-Z_]{1,}$/, "g") ,
                                    message: '密码只允许包含数字、字母和下划线'
                                },

                            ]}
                        >
                            <Input.Password  onChange={this.changePassword.bind(this)} placeholder="请输入密码"></Input.Password>
                        </Form.Item>

                        <Form.Item
                            label="确认密码"
                            name="confirm"
                            rules={ [

                                {
                                    required: true,
                                    message: '确认密码'
                                },
                                {
                                    min: 8,
                                    message: '密码不能小于8个字符'
                                },
                                {
                                    max: 16,
                                    message: '密码不能大于16个字符'
                                },
                                {
                                    pattern: new RegExp(/^[0-9a-zA-Z_]{1,}$/, "g") ,
                                    message: '密码只允许包含数字、字母和下划线'
                                },
                                ({getFieldValue}) => ({
                                    validator(rule, value){
                                        if(! value || getFieldValue('password') === value){
                                            return Promise.resolve();
                                        }
                                        return Promise.reject("两次密码不匹配");
                                    }
                                })


                            ]}
                        >
                            <Input.Password placeholder="确认密码"></Input.Password>
                        </Form.Item>
                        <Form.Item label="邮箱验证码" extra="我们必须确保您是本人">
                            <Row gutter={8}>
                                <Col span={12}>
                                    <Form.Item
                                        name="code"
                                        noStyle
                                        rules={ [

                                            {
                                                required: true,
                                                message: '请输入验证码'
                                            },

                                        ]}

                                    >
                                        <Input onChange={this.changeCode.bind(this)} placeholder="输入验证码" />

                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Button onClick={() => this.sendCode()} disabled={this.state.linked? false:true} type="link">
                                        {
                                            this.state.linked? '获取邮箱验证码': `${this.state.count} s后重新发送`
                                        }
                                    </Button>
                                </Col>
                            </Row>
                        </Form.Item>
                        <Form.Item {...tailLayout} name="remember" valuePropName="checked"

                                   rules= {[
                                       {validator:(_, value)=> value ? Promise.resolve() : Promise.reject("您需要接受才能注册")}
                                   ]}


                        >
                            <Checkbox>我已阅读并接受<a href="">《规则》</a>和<a href="#">隐私</a></Checkbox>

                        </Form.Item>
                        <Form.Item{...tailLayout}>
                            <Button type="primary"   htmlType="submit" >
                                注册
                            </Button>
                            <a href="/#/Login">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已有账号？</a>
                        </Form.Item>
                    </Form>
                </div>

            </div>
        );


    }
}
export default Register;
